<template>
  <el-dropdown trigger="click" @command="Myselfinfo">
    <div class="Myselfinfo">
      <img class="Myselfinfo-img" :src="this.token? avatarUrl:''" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :command="{a:1}">
          <span class="iconfont icon-geren"></span>个人信息
        </el-dropdown-item>
        <el-dropdown-item :command="{a:2}" divided>
          <span class="iconfont icon-mima"></span>密码修改
        </el-dropdown-item>
        <el-dropdown-item :command="{a:3}" divided>
          <span class="iconfont icon-zhixiangyou"></span>退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import http from "@/util/http";
import { mapActions } from "vuex";
import Cookies from "js-cookie"; //用Cookies存储
export default {
  data() {
    return {
      token: "",
      avatarUrl: "",
      myinfo: {
        _gp: "admin",
        _mt: "info",
        AdminToken: Cookies.get("token"),
      },
    };
  },
  created() {
    this.info();
  },
  methods: {
    ...mapActions(["tuichu"]),
    info() {
      this.token = Cookies.get("token");
      http
        .post(this.myinfo)
        .then((res) => {
          if (res.data.errmsg == "成功") {
            this.avatarUrl = res.data.data.avatarUrl;
            this.$store.dispatch("mydata", res.data.data); //dispatch是调用actions的函数的
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    Myselfinfo(e) {
      switch (e.a) {
        case 1:
          this.$router.push({ path: "/Index/MyInfo" });
          console.log();
          break;
        case 2:
          this.$router.replace({ path: "/Index/MYPassword" });

          break;
        case 3:
          // 这里的移除token和跳转到登录页面要是不写的话，页面点击退出去登录就会出现第一次退出不成功要二次点击退出才会成功
          // 所以这里也要写移除token和跳转到登录页面
          Cookies.remove("token");
          this.$router.replace({ path: "/Login" });
          this.tuichu();
          break;
        default:
          4;
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.Myselfinfo {
  margin: 0 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(235, 234, 232);
  .Myselfinfo-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
</style>
